import { View, Button } from '@tarojs/components';
import './index.scss';
import IconFont from '../../iconfont';
import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { STATUS, STATUS_NAME_EN, courseInfo } from '../../../configProvider';
import HistoryCard from '../../../components/Card/HistoryCard';
import dayjs from 'dayjs';

const History = () => {
  const [courseList, setCourseList] = useState<courseInfo[]>([]);
  const [status, setStatus] = useState(-1);
  const [code, setCode] = useState('');
  useEffect(() => {
    Taro.getStorage({
      key: 'status',
      success: (status) => {
        setStatus(status.data);
        Taro.getStorage({
          key: 'code',
          success: function (res) {
            console.log(res.data)
            setCode(res.data)
            Taro.cloud.callFunction({
              // 要调用的云函数名称
              name: 'getCourseList',
              // 传递给云函数的event参数
              data: {
                code: res.data,
                status: STATUS_NAME_EN[status.data]
              }
            }).then((res: any) => {
              console.log('courses', res.result)
              setCourseList(res.result)
            }).catch(err => {
              console.log('fail to call getCourseList', err)
            })
          },
          fail: (res) => {
            console.log('fail to get code', res)
          }
        })
      }
    })
  }, [])

  const handleClick = (_id: string, checkIndex: number) => {
    if (status !== STATUS.STUDENT) {
      viewDetails(_id, checkIndex);
    }
  }

  const viewDetails = (_id: string, checkIndex: number) => {
    Taro.navigateTo({
      url: `../historyDetails/index?courseId=${_id}&checkIndex=${checkIndex}`,
    });
  }

  return <>
    <View className='courses-list'>
      {courseList.length > 0 && courseList.map(course => {
        if (course.check) {
          return course.check.map((value, index) => {
            return {
              time: value.date,
              render: <HistoryCard name={course.courseName} startTime={course.startTime}
                endTime={course.endTime} weekday={course.weekday} teacher={course.teacher}
                checkDate={dayjs(value.date).format('YYYY-MM-DD HH:mm:ss')}
                attended={value.students.indexOf(code) !== -1} leaved={value.leaveStudents ? value.leaveStudents.indexOf(code) !== -1 : undefined}
                status={status} totalNum={course.students.length} attendNum={value.students.length}
                leaveNum={value.leaveStudents ? value.leaveStudents.length : 0}
                onClick={() => handleClick(course._id, index)} />
            }
          })
        }
        return []
      }).flat()
        .sort((a, b) => {
          return a.time < b.time ? 1 : -1
        })
        .map(item => item.render)}
    </View>
    {courseList.length === 0 && <View className='no-cheak'>
      <View className='no-cheak-tips no-cheak-tips-icon'>
        <IconFont name='check-rectangle' size={200} color='#ccc' />
      </View>
      <View className='no-cheak-tips no-cheak-tips-1'>暂无课程</View>
    </View>}
  </>
}
export default History;
